<template>
  <div class="">
    <!-- 导航栏 -->
    <van-nav-bar
      title="编辑昵称"
      left-text="取消"
      right-text="确定"
      @click-left="$emit('onClose')"
      @click-right="doUpdate"
    />
    <!-- /导航栏 -->
    <!-- 输入框 -->
    <van-field
      v-model="localName"
      rows="2"
      autosize
      type="textarea"
      maxlength="7"
      placeholder="请输入新昵称"
      show-word-limit
    />
    <!-- /输入框 -->
  </div>
</template>

<script>
// 导入 更新名字方法
import { updateUserName } from '@/api/user.js'

export default {
  name: '',
  props: {
    // 原始 用户名
    usrName: {
      required: true
    }
  },
  data() {
    return {
      localName: this.usrName
    }
  },
  created() {},
  methods: {
    async doUpdate() {
      try {
        this.$toast.loading({
          message: '请稍后...', // 提示消息
          forbidClick: true, // 禁止点击关闭
          duration: 0 // 不关闭
        })
        await updateUserName(this.localName)
        this.$toast.success('更新成功~')
        this.$emit('onSuc', this.localName)
      } catch (err) {
        this.$toast.fail('更新失败~')
      }
    }
  },
  computed: {},
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #fff;
  /deep/ .van-nav-bar__title {
    color: #000 !important;
  }
}
</style>
